<template>
    <div class="indexPage">

        <Head></Head>
        <div class="tabbox">
            <div class="headSty flex_str">
                <div style="margin-right: 20px;">用户昵称:</div>
                <div class="IptSty">
                    <el-input v-model="userParams.nickName" @blur="getHouseList()"></el-input>
                </div>

                <div style="margin-right: 10px;">用户手机号：</div>
                <div class="IptSty">
                    <el-input v-model="userParams.mobile" @blur="getHouseList()"></el-input>
                </div>

                <div style="margin-right: 20px;">用户状态:</div>
                <el-select placeholder="请选择用户状态" style="margin-right: 40px;" v-model="userParams.status"
                    @change="changeStatus">
                    <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <el-table :data="tableData" border stripe style="width: 100%">
                <el-table-column prop="nickName" label="用户昵称" />
                <el-table-column prop="mobile" label="用户手机号" />
                <el-table-column prop="statusName" label="状态" width="180" />
                <el-table-column prop="createTime" label="注册时间" />
                <!-- <el-table-column prop="constructionArea" label="禁用原因" /> -->
                <!-- <el-table-column prop="createTime" label="头像" width="200" /> -->
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="infoSee(scope.row.id)">详情</el-button>
                        <el-button link type="primary" size="small" @click="adoptFun(scope.row.id)" v-if="scope.row.status != '0'">禁用</el-button>
                        <el-button link type="primary" size="small" @click="LowerHouse(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="footer ">
                <el-pagination v-model:current-page="userParams.current" v-model:page-size="userParams.size"
                    :page-sizes="[10, 15, 30, 50, 100]" :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
    <adoptDialog v-model="dialog.isShow" :id="houseId" @close="close">
    </adoptDialog>
    <lowerDialogVue v-model="dialog.lowerShow" :id="houseId" @close="lowerClose"></lowerDialogVue>
    <infoDialogVue v-model="dialog.infoIsshow" :id="houseId" @close="infoClose"></infoDialogVue>
</template>
  
<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue"
import Head from "@/components/head/index.vue";
import { ElTable, ElMessage, ElMessageBox } from 'element-plus'
import adoptDialog from './dialog/adoptDialog.vue'
import infoDialogVue from "./dialog/infoDialog.vue";
import lowerDialogVue from "./dialog/lowerDialog.vue";
import { formatDayTime } from '@/utils/moment'
import { getUserListApi, delUserApi } from '@/api/index/index'
const dialog = reactive({
    isShow: false,
    infoIsshow: false,
    lowerShow: false
})
const userParams = reactive<any>({
    nickName: '',
    mobile: '',
    status: null,
    current: 1,
    size: 10,
})
const total = ref(0)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const statusList = ref([
    {
        label: '全部',
        value: null
    },
    {
        label: '禁用',
        value: 0
    }, {
        label: '正常',
        value: 1
    }
])
const tableData = ref<any[]>([])



const houseId = ref(0)
const handleSizeChange = (val: number) => {
    userParams.size = val
    getHouseList()
}
const handleCurrentChange = (val: number) => {
    userParams.current = val
    getHouseList()
}
// 禁用
const adoptFun = (id: number) => {
    houseId.value = id
    dialog.isShow = !dialog.isShow
}
// 删除用户
const LowerHouse = (id: number) => {
    ElMessageBox.confirm(
        '您确认要删除用户吗？删除后用户将不可用!',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delUserApi({
                id: id
            }).then((res: any) => {
                if (res.status == 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getHouseList()
                }
            })

        })
        .catch(() => {
        })
}
// 用户详情
const infoSee = (id: number) => {
    houseId.value = id
    dialog.infoIsshow = !dialog.infoIsshow
}
const close = () => {
    userParams.status = null;
    getHouseList()
    dialog.isShow = false
}
const lowerClose = () => {
    userParams.status = null;
    getHouseList()
    dialog.lowerShow = false
}
const infoClose = () => {
    dialog.infoIsshow = false
}

const getHouseList = () => {
    getUserListApi(userParams).then((res: any) => {
        tableData.value = res.data.records
        total.value = res.data.total
    })
}
const changeStatus = (num: any) => {
    userParams.status = num;
    getHouseList()
}


onMounted(() => {
    getHouseList()
})

</script>
<style scoped>
.footer {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 20px;
}

.headSty {
    margin-bottom: 20px;
}

.IptSty {
    width: 140px;
    margin-right: 50px;
}

.searchBtnSty {
    padding: 4px 25px;
    color: #fff;
    background-color: #409EFE;
    border-radius: 10px;
}

.indexPage {
    height: 100%;
}

.tabbox {
    width: 1560px;
    height: 87%;
    border-radius: 10px;
    padding: 20px;
}
</style>
  